<template>
  <div class="variable-stability">
    <a-row>
      <span>选择变量：</span>
      <a-select style="width: 420px" placeholder="请选择变量(可多选)" v-model="variables" @change="handleChange">
        <a-select-option v-for="item in allVariables" :key="item" :value="item">{{ item }}</a-select-option>
      </a-select>
    </a-row>
    <a-row v-for="item in chartOption" :key="item.title">
      <div class="chart-wrapper">
        <echart :option="item.option" v-if="item.option" />
        <div v-else class="empty-state">
          <Empty :description="item.emptyText" />
        </div>
      </div>
    </a-row>
    <a-row>
      <a-tabs v-model="date" @change="handleDateChange">
        <a-tab-pane v-for="item in dateRangeList" :key="item" :tab="item" />
      </a-tabs>
      <a-table :columns="columns" :data-source="tableList" :pagination="false" />
    </a-row>
  </div>
</template>

<script>
import { Echart } from '@/components'
import { Empty } from 'ant-design-vue'
import { deepMerge, echartConfig } from './echart.config'

const columns = [
  {
    title: '分箱',
    dataIndex: 'bin',
    key: 'bin',
  },
  {
    title: '与建模对比差值',
    dataIndex: 'diffBuild',
    key: 'diffBuild',
  },
  {
    title: '与昨天对比差值',
    dataIndex: 'diffDay',
    key: 'diffDay',
  },
  {
    title: '与上周对比差值',
    dataIndex: 'diffWeek',
    key: 'diffWeek',
  },
  {
    title: '与上月对比差值',
    dataIndex: 'diffMouth',
    key: 'diffMouth',
  },
  {
    title: '与建模对比比率',
    dataIndex: 'rateBuild',
    key: 'rateBuild',
  },
  {
    title: '与昨天对比比率',
    dataIndex: 'rateDay',
    key: 'rateDay',
  },
  {
    title: '与上周对比比率',
    dataIndex: 'rateWeek',
    key: 'rateWeek',
  },
  {
    title: '与上月对比比率',
    dataIndex: 'rateMouth',
    key: 'rateMouth',
  },
]
export default {
  name: 'VariableDistribution',
  components: {
    Echart,
    Empty,
  },
  props: {
    alertConfigField: {
      type: Array,
      default: () => [],
    },
    queryParam: {
      type: Object,
      default: () => ({}),
    },
    dataSource: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    alertConfigField: {
      handler(newVal) {
        this.allVariables = newVal
        this.variables = newVal[0]
      },
      deep: true,
      immediate: true,
    },
    dataSource: {
      handler(newVal) {
        this.initChart(newVal)
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      columns: columns,
      allVariables: [],
      variables: [],
      chartOption: {},
      loading: false,
      date: '',
      rangedata: {},
      dateRangeList: [],
    }
  },
  computed: {
    tableList() {
      return this.rangedata[this.date] || []
    },
  },
  methods: {
    handleChange(value) {
      this.$emit('variableChange', [value])
    },
    initChart(val) {
      console.log('initChart', val)
      if (val.length === 0) {
        return
      }
      const [first, second] = val
      const { labels, proportion, count } = first
      this.rangedata = second
      this.dateRangeList = labels
      const renderOption = (option) => {
        const { title, data, type } = option
         if (!Object.keys(data).length) {
          return null
        }
        const series = Object.keys(data).map((key) => {
          if (type === 'line') {
            return {
              data: data[key],
              type,
              name: key,
              smooth: true,
            }
          }
          if (type === 'bar') {
            return {
              data: data[key],
              type,
              name: key,
              stack: 'total',
              barWidth: '60%',
              label: {
                show: true,
                formatter: (params) => (params.value ? params.value + '%' : ''),
              },
            }
          }
        })
        return deepMerge(echartConfig, {
          title: {
            text: title,
          },
          xAxis: {
            data: labels,
          },
          yAxis: {
            type: 'value',
            name: '',
            axisLabel: {
              formatter: type === 'bar' ? '{value}%' : '{value}',
            },
          },
          legend: {
            data: Object.keys(data),
          },
          series,
        })
      }
      this.chartOption = [
        {
          title: '分箱调用量',
          data: count,
          emptyText: '分箱调用量暂无数据',
          type: 'line',
        },
        {
          title: '分箱占比分布',
          data: proportion,
          emptyText: '分箱占比分布暂无数据',
          type: 'bar',
        },
      ].map((item) => {
        return {
          option: renderOption(item),
          emptyText: item.emptyText,
        }
      })
      console.log('this.chartOption', this.chartOption)
    },
    handleDateChange(key) {
      this.date = key
    },
  },
}
</script>

<style lang="less" scoped>
.variable-stability {
  .chart-wrapper {
    margin-top: 12px;
    padding: 36px;
    .empty-state {
      padding: 40px 0;
      text-align: center;
      background-color: rgb(251, 251, 251);
      border-radius: 4px;
      border: 1px solid rgb(238, 238, 238);
    }
  }
}
</style>
